@use "styles/BoxShadow.module.scss";
@use "styles/IconSizes.module.scss";
@use "styles/Radius.module.scss";
@use "styles/Spacings.module.scss";

.search_bar_wrapper {
  display: flex;
  flex-direction: column;
  gap: Spacings.$spacing03;
  background-color: var(--background-0);
  border-radius: Radius.$big;
  border: 1px solid var(--border-0);
  overflow: auto;
  box-shadow: BoxShadow.$large;

  &.new_brain {
    border-color: var(--primary-0);
  }

  .editor_wrapper {
    display: flex;
    padding: Spacings.$spacing05;
    gap: Spacings.$spacing05;

    &.disabled {
      pointer-events: none;
      opacity: 0.3;
      padding-top: 0;
    }

    &.current {
      padding-top: 0;
    }

    .search_icon {
      width: IconSizes.$big;
      height: 100%;
      color: var(--accent);
      cursor: pointer;
      align-self: flex-end;

      &.disabled {
        color: var(--text-3);
        pointer-events: none;
        opacity: 0.2;
      }
    }
  }
}
